<template>
  <div id="container">
    <loading :show-loading = "showLoading"></loading>
    <float-div v-show="showFloat" :clientX="globalMouse.x" :clientY="globalMouse.y"></float-div>
  </div>
</template>

<script>

//引如info组件
import FloatDiv from '@/views/visualization/components/FloatDiv'
//引入基础mixin
import base from '@/views/visualization/mixins/base'
// 引入遮罩层
import loading from '@/views/visualization/components/loading.vue'
// 引入模型文件
import model from '@/assets/modle/floor_07.gltf'
export default {
  components: {
    FloatDiv,
    loading
  },
  mixins : [base],
  data () {
    return {
      // 遮罩层控制
      showLoading:false,
      // 悬浮div状态
      showFloat: false,
    }
  },
  computed:{
    // 侧边栏状态
    isLoading(){
      return this.$store.getters.sidebar.opened
    }
  },
  watch: {
    // 控制遮罩层是否显示
    isLoading(){
      this.showLoading = true
      setTimeout(()=>{
        this.showLoading = false
      },500)
    }
  },
  mounted(){
    // 加载模型
    this.initModel()
  },
  
  methods: {
    /**
     * 加载模型 模型添加自定义事件
     */ 
    initModel(){
      let _this = this
      this.GLTFLoader.load(model, function (gltf) {
        gltf.scene.traverse(function (child) {
          // 遍历加载的模型 添加交互事件
          if (child.isMesh) {
            if(child.name.indexOf('flame')!=-1){
              child.material.visible = false
              console.log('隐藏模型：'+child.name)
            }
          }
        })
        // 大小
        gltf.scene.scale.set(1,1,1)
        // 位置 (左右,上下，前后)
        gltf.scene.position.set(0,0,0)
        // 添加到scene
        _this.scene.add(gltf.scene)
      })
    },

    /**
     * 双击事件处理函数
     * 参数：intersects 双击的mesh数组
     */
    handleDblClick(intersects){
      // 打印相交数组
      console.log(intersects)
      //判断点击的是door
      if(intersects.length > 0 && intersects[0].object.name.indexOf('door') != -1){
        console.log(intersects[0].object.name)
      }
      //判断点击的是camera
      if(intersects.length > 0 && intersects[0].object.name.indexOf('camera') != -1){
        console.log(intersects[0].object.name)
      }
    },

    /**
     * hover事件处理
     * 参数：intersect 触发事件的mesh
     */
    handleHover(intersect){
      if(intersect.object.name.indexOf('door')!=-1||intersect.object.name.indexOf('camera')!=-1){
          console.log('鼠标移动',intersect.object.name)
          this.showFloat = true
        }else{
          this.showFloat = false
        }
    }
  }
}
</script>

<style lang="scss" scoped>
#container{
  width:100%;
  height: 100%;
  position: absolute;
}

</style>